<template>
  <el-row class="flex-column template-page">
    <el-row class="page-header">
      <el-col :span="12" class="header-left">
        <span>模板设置</span>
      </el-col>
      <el-col :span="12" class="header-right">
        <el-button
          size="mini"
          icon="el-icon-refresh"
          @click="init"
        >测试刷新按钮</el-button>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-finished"
          @click="handleConfirm"
        >保 存</el-button>
      </el-col>
    </el-row>

    <el-row class="page-container">
      <el-row class="component-prompt">正在加载...</el-row>
    </el-row>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { TemplateModule } from '@/store/modules/config/template/index'
import { CommonModule } from '@/store/modules/common'

@Component({
  name: 'customerTemplate',
  components: {
  }
})

export default class CustomerTemplate extends Vue {
  private $router: any
  private $store: any
  private $confirm: any
  private $message: any
  private templateData: {} = { currentFields: [] }
  private pageLoading: boolean = false

  public mounted () {
    this.init()
  }

  public handleConfirm () {
    console.log('templateData:\n', (this as any).templateData.currentFields)
    // this.$router.push({
    //   path: '/index/setting_center/agent'
    // })
    console.log('111:\n', this.templateData)
    this.$confirm('该操作将保存以下客户模板设置，是否确认？', '确认保存模板', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success',
      iconClass: 'V7_iconfont V7_iconV7tubiao_chenggong green'
    }).then(() => {
      this.pageLoading = true
      const pF = JSON.parse(JSON.stringify(
        this.templateData,
        ['_id', 'name', 'remark']
      ))
      pF.fields = (this as any).templateData.currentFields
      console.log('pF:\n', pF)
      TemplateModule.TemplateCommonAction({ url: '/crm/action/template/save', method: 'POST', data: pF }).then(res => {
        console.log('then res:\n', res)
        if (res) {
          this.$message.success('模板保存成功')
          this.init()
        }
      }).finally(() => {
        this.pageLoading = false
      })
    }).catch(e => { console.log(e) })
  }

  private beforeRouteEnter (to: any, from: any, next: any): void {
    next((vm) => {
      // console.log('vm:\n', vm)
      // console.log('vm.$route:\n', vm.$route);
      // vm.init()
    })
  }

  private init () {
    console.log('CommonModule:\n', CommonModule.session)
    this.pageLoading = true
    // TemplateModule.TemplateList({}).then(res => {
    //   if (res) {
    //     // this.templateData = convertRequestData2FrontData(res)
    //     // console.log('res:\n', this.templateData)
    //   }
    // }).finally(() => {
    //   this.pageLoading = false
    // })
  }
}
</script>

<style lang="stylus" scoped>
  .template-page
    // margin-left 10px
    .page-header
      height 30px
      margin-bottom 20px
      .header-left
        font-size: 18px
        font-weight: 900
      .header-right
        text-align: right
    .page-container
      flex 1
      border-radius 10px
      box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
      margin 0 2px 2px 0
      height calc(100% - 50px)
      // overflow auto
      .component-prompt
        font-size 20px
        color #767E92
        position absolute
        top 30%
        z-index 0
        text-align center
        width 100%
        overflow-x hidden
</style>
